{% extends 'base.html' %}
{% block title %}
    {{ html_title }}
{% endblock title %}

{% block head %}
    {# 加载sidebar的CSS #}
    {% load static %}
    <link rel="stylesheet" href="{% static "css/sidebar.css"%}">
    <style type="text/css">
        label.required::before {
            content: "*";
            color: red;
        }
    </style>
{% endblock head %}

{% block body %}
<div class="row" id="body-row">
    <div class="col-sm-3 col-md-2 sidebar">
          <ul class="sidebar-nav">
              {% for sidebar in sidebar_list %}
                  {# 判断当前Rack是不是Active Rack,如果是CSS会调整颜色 #}
                  {% if sidebar.0 == active_sidebar %}
                    <li class="active">
                        <a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a>
                    </li>
                  {% else %}
                      <li><a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a></li>
                  {% endif %}
              {% endfor %}
          </ul>
    </div>
    <div class="col-sm-9 col-md-10 main">
        <br><h2 style="color: #666666">添加设备类型</h2>
        {% if successmessage %}
            <span class="message"><div class="alert alert-success" role="alert">{{ successmessage }}</div></span>
        {% endif %}

        {% if warningmessage %}
            <span class="message"><div class="alert alert-warning" role="alert">{{ warningmessage}}</div></span>
        {% endif %}

        {% if errormessage %}
            <span class="message"><div class="alert alert-danger" role="alert">{{ errormessage }}</div></span>
        {% endif %}
        {# 上传文件需要 enctype="multipart/form-data" #}
        <form action="" method="post" enctype="multipart/form-data">
            {# CSRF跨站请求伪造 #}
            {# 添加CSRF防护的隐含参数Token,这是必须配置内容,并不是可选,注意使用render来渲染页面 #}
            {# <input type="hidden" name="csrfmiddlewaretoken" value="BuPkZVju5knmAuRpSZi5C3GMJh8U9IXFhPixPfQ1PDPmDZfeknt1hHREYlZkrvJZ">#}
            {% csrf_token %}

            {% for field in form %}
                <div class=form-group>
                    {# 手动渲染表单参考文档 #}
                    {# https://docs.djangoproject.com/en/dev/topics/forms/#rendering-fields-manually #}
                    {# 如果出现Form错误(各种校验错误),在Form展示给客户看 #}
                    {% if field.errors %}
                    {# 调整了bootstrap的显示样式 https://getbootstrap.com/docs/4.1/components/alerts/#}
                    <div class="alert alert-danger" role="alert">{{ field.errors }}</div>
                    {% endif %}
                    {# 显示字段的label(名字) #}
                    {{ field.label_tag }}
                    {# 显示输入与选择字段 #}
                    {{ field }}
                </div>
            {% endfor %}
            {# 调整了bootstrap的显示样式 https://getbootstrap.com/docs/4.1/components/buttons/#button-tags#}
            <input class="btn btn-primary btn-lg" type='submit' value='提交'>
            {# 把上传成功或者失败的信息显示到这里, 并且通过JS让他3秒后消失 #}
            <span class="message" style="color: red">&nbsp;{{ message }}</span>
        </form>
    </div>
</div>
{% endblock body %}
